import * as React from 'react';
import Box from '@/commonComponents/box/index';
import { sendImage } from '../../common';
import Expression from './expression';
import smilePng from '../../assets/Images/service/笑脸.png';
import '../../assets/CSS/chat.css';
import './index.module.scss';
const { memo, useState } = React;

interface BottomProps {
  data?: number[];
  isLoading?: boolean;
  signalrService: (
    content: any,
    identity: any,
    type: any,
    isSend2Other?: boolean,
    isRobot?: boolean
  ) => void;
  sendInfo: string;
  setSendInfo: (val: string) => void;
}

function Bottom(props: BottomProps) {
  const { signalrService, sendInfo, setSendInfo } = props;
  // const [sendInfo, setSendInfo] = useState('');
  const hanleChange = (e: React.FormEvent<HTMLInputElement>) => {
    setSendInfo(e.currentTarget.value);
  };
  const [showExpression, setShowExpression] = useState(false);
  // 发送消息给会员或客服
  function toSend(content: any, identity: any, type: any) {
    if (type === 0 && content.length <= 0) {
      alert('请输入发送内容');
      return;
    }
    // if (type === 2 && sender.isService) {
    //   // expressionShow = !expressionShow;
    // }
    signalrService(content, identity, type);
  }
  return (
    <Box data={[1]} isLoading={false} styleName="bottom-info">
      <div styleName="bottom-box">
        <div styleName="inputDiv2">
          <input
            styleName="inputContent"
            type="text"
            value={sendInfo}
            onChange={hanleChange}
            // onInput={updateSendInfoSelf}
          />
        </div>
        <label styleName="fileImage" htmlFor="service-file">
          图片
          <input
            id="service-file"
            name="customer"
            type="file"
            value=""
            onChange={(e) => sendImage(e, 2, signalrService)}
          />
        </label>
        <div
          styleName="sendExpression"
          onClick={() => setShowExpression(!showExpression)}
        >
          <img src={smilePng} />
        </div>
        <div styleName="sendToPeople" onClick={() => toSend(sendInfo, 2, 0)}>
          发送
        </div>
      </div>

      {showExpression && <Expression toSend={toSend} identity={2}></Expression>}
    </Box>
  );
}

export default memo(Bottom);
